<template>
  <div class="fjscreen">
    <screenHeader :showVolume="Boolean(sortVoiceSwitch)" @playVolume="playVolume"></screenHeader>
    <screenContent ref="screenContent"></screenContent>
    <div class="path-btn">
      <div class="mr-10" @click="goPath"></div>
      <div :class="{ 'active': $route.path === '/fjscreen'}" ></div>
    </div>
  </div>
</template>

<script>
import screenHeader from './header.vue';
import screenContent from './content.vue';
import { mapGetters } from "vuex";
import { packApi } from "@/utils/public.js";
import { setting_company } from "@/api/currency";
export default {
  name: 'fjscreen',
  components: { screenHeader, screenContent },
  data() {
    return {
      isRequesting: false, // 请求标识
    }
  },
  computed: {
    ...mapGetters(["avatar","sortVoiceSwitch"]),
  },
  created() {
    this.screen();
    this.setupEchoListeners(this.avatar.company_id);
  },
  destroyed() {
    window.Echo.leave(`sortScreenEvent.${this.avatar.company_id}`);
  },
  methods: {
    // 设置事件监听器
    setupEchoListeners(company_id) {
      if(!window.Echo) return;
      window.Echo.channel(`sortScreenEvent.${company_id}`).listen(
        "SortScreenEvent",
        (e)=> {
          console.log(e);
          if((this.$refs.screenContent.dateTime == e.notice.send_time) && e.notice.msg) this.playCoice(e.notice.msg);
        }
      )
    },
    // 全屏
    screen() {
      let element = document.documentElement;
      var requestMethod =
        element.requestFullScreen || //W3C
        element.webkitRequestFullScreen || //Chrome等
        element.mozRequestFullScreen || //FireFox
        element.msRequestFullScreen; //IE11
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    goPath() {
      this.$router.push('/bigdata')
    },
    playVolume() {
      if(this.isRequesting) return;
      this.isRequesting = true;
      let data = packApi({
        sort_voice_switch: this.sortVoiceSwitch == 1 ? 0 : 1, 
      });
      setting_company(data).then(res=> {
        this.$store.commit("user/SET_SORTVOICESWITCH", this.sortVoiceSwitch == 1 ? 0 : 1);
        this.sortVoiceSwitch ? this.$message.success("语音播报已开启") : this.$message.error("语音播报已关闭");
        this.isRequesting = false;
      });
    },
    //  语音播报
    playCoice(text) {
      if(!this.sortVoiceSwitch) return;
      const synth = window.speechSynthesis;
      const speech = new SpeechSynthesisUtterance();
      speech.text = text; // 文字内容: 如果能播放出声音 那可真是泰裤辣！
      speech.lang = "zh-CN"; // 使用的语言:中文
      speech.volume = 1; // 声音音量：1
      speech.rate = 1; // 语速：1
      speech.pitch = 9; // 音高：1
      synth.speak(speech); // 播放
    }
  }
}
</script>
<style lang="scss" scoped>
.fjscreen {
  width: 100%;
  height: 1080px;
  background-image: url('../../assets/images/fjscreen/cfjscreen-bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  .path-btn {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    opacity: 0;
    div {
      width: 40px;
      height: 6px;
      background: rgba(255,255,255,0.25);
      border-radius: 2px;
      cursor: pointer;
      &.mr-10 {
        margin-right: 10px;
      }
      &.active {
        background: rgba(255,255,255,0.75);
      }
    }
  }
}
</style>